<template>
  <div>
    <tag></tag>
    <!-- 标签页区域 -->
    <el-tabs v-model="active">
      <el-tab-pane :label="`未读消息(${this.$store.getters.unread})`" name="1">
      </el-tab-pane>
      <el-tab-pane :label="`已读消息(${this.$store.getters.read})`" name="2">
      </el-tab-pane>
      <el-tab-pane
        :label="`回收站(${this.$store.getters.removed})`"
        name="3"
      ></el-tab-pane>
    </el-tabs>
    <!-- 列表区域 -->
    <el-table :data="msg">
      <el-table-column prop="title"></el-table-column>
      <el-table-column> </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.status == 1"
            size="mini"
            @click="changeState(scope.row.id, 2)"
            >标记已读</el-button
          >
          <el-button
            type="danger"
            v-show="scope.row.status == 2"
            size="mini"
            @click="changeState(scope.row.id, 3)"
            >删除</el-button
          >
          <el-button
            type="info"
            v-show="scope.row.status == 2"
            size="mini"
            @click="changeState(scope.row.id, 1)"
            >还原已读</el-button
          >
          <el-button
            v-show="scope.row.status == 3"
            size="mini"
            @click="changeState(scope.row.id, 2)"
            >还原</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tag from "../common/tag";
export default {
  components: {
    tag,
  },
  data() {
    return {
      active: "1",
    };
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {
    //筛选消息列表的数据操作
    msg() {
      //数据简单的复制
      let list = this.$store.state.message;
      //筛选同等状态的值即可
      return list.filter((item) => {
        return item.status == this.active;
      });
    },
  },
};
</script>

<style scoped>
</style>
